<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="icon" href="img/favicon.ico">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/vendor.min.css">
    <link rel="stylesheet" href="css/plugins.min.css">
    <link rel="stylesheet" href="css/style.min.css">
    <style>
        html{
            height: 100%;
            overflow-y: hidden;
        }
        body{
            height: 100%;
            overflow-y: auto;
        }
        .wenzi{
            background-color: #215083;font-size: 13px;padding: 10px 15px;text-align: center;color: white;width: 200px;margin: auto;
        }
        .newImg{
            width: 300px;height: 200px;
        }
    </style>
</head>
<body>

<div class="container" style="margin-top: 20px;">
    <h2 style="margin-bottom: 50px;">下载</h2>
    <div style="display: flex;justify-content: space-around;" id="download">
        <!--        <div>-->
        <!--            <div class="wenzi">体育赛事及日常活动</div>-->
        <!--            <div>-->
        <!--                <img src="img/banner.jpg" class="newImg">-->
        <!--            </div>-->
        <!--        </div>-->
    </div>
</div>

<script src="js/vendor.min.js"></script>
<script src="js/plugins.min.js"></script>
<script src="js/main.min.js"></script>
<script src="layui/layui.js"></script>
<script src="js/token.js"></script>
<script src="js/config.js"></script>
<script src="js/jquery.i18n.min.js"></script>
<script src="js/multi_lang_config.js"></script>
<script>

    var layer = layui.layer;
    var form = layui.form;

    var moduleName = "subMain";
    var defaultLang = layui.data('langTab').langType;
    initLangConfig({
        defaultLang:defaultLang,
        filePath: "js/i18n/"+moduleName+"/",
        module:moduleName,
        base:"js/"
    })
    var i18np = null;
    function changeLang(lang) {
        defaultLang = lang;
        reloadI18n({
            defaultLang:lang,
            filePath: "js/i18n/"+moduleName+"/",
            module:moduleName,
        })
        i18np.loadProperties(moduleName);
        downloadDataInit();
    }

    layui.config({base: 'js/'})
        // 继承treetable.js插件
        .extend({i18np: 'i18n'}).use([ 'i18np','jquery'], function () {
        i18np = layui.i18np;
        i18np.loadProperties(moduleName);
    });

    var downloadData = [];
    function downloadDataInit(){
        let s = "";
        if (defaultLang == "zh") {
            for (var i=0;i<downloadData.length;i++){
                s = s + "<div>\n" +
                    "            <div class=\"wenzi\">"+downloadData[i].titleZh+"</div>\n" +
                    "            <div>\n" +
                    "                <img src=\""+downloadData[i].picture+"\" class=\"newImg\">\n" +
                    "            </div>\n" +
                    "        </div>";
            }
        } else if (defaultLang == "la") {
            for (var i=0;i<downloadData.length;i++){
                s = s + "<div>\n" +
                    "            <div class=\"wenzi\">"+downloadData[i].titleLao+"</div>\n" +
                    "            <div>\n" +
                    "                <img src=\""+downloadData[i].picture+"\" class=\"newImg\">\n" +
                    "            </div>\n" +
                    "        </div>";
            }
        } else if (defaultLang == "en") {
            for (var i=0;i<downloadData.length;i++){
                s = s + "<div>\n" +
                    "            <div class=\"wenzi\">"+downloadData[i].titleEn+"</div>\n" +
                    "            <div>\n" +
                    "                <img src=\""+downloadData[i].picture+"\" class=\"newImg\">\n" +
                    "            </div>\n" +
                    "        </div>";
            }
        }
        $("#download").html(s);
    }

    $(function (){
        search();
    })
    function search() {
        $.ajax({
            url: HOST+"webapi/aboutUs/getNewsOrDownloadByType?type=2",
            type: "GET",
            success: function (res) {
                downloadData = res.data;
                downloadDataInit();
            }
        })
    }

</script>
</body>
</html>